<template>
  <el-main>
    <div class="container">
      <Tag />

        <el-row type="flex" class="content" style="padding:0 20px">
          <el-col :span="4" style="margin:10px 4px" v-for="(work,index)  in page.list" :key="index">
            <el-card :body-style="{ padding: '0px' } " shadow="hover">
              <nuxt-link class="info" :to="'work/'+work.id">
                <img :src="work.coverImage" class="image" />
              </nuxt-link>
              <div style="padding: 14px;">
                <span>{{work.title}}</span>
                <span :class="(work.score)>90?'scope_01':'scope_02'">{{work.score/10}}</span>
                <div class="bottom clearfix">
                  <el-tag
                    size="mini"
                    type="info"
                    style="margin-right:2px"
                    v-for="(x,index2) in work.tagList"
                    :key="index2"
                  >{{x.udxName}}</el-tag>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row>
          <el-col class="page">
            <el-pagination
              :total=" page.total"
              background
              layout="prev, pager, next"
            
              @current-change="currentChange"
            ></el-pagination>
          </el-col>
        </el-row>
      </div>
    
  </el-main>
</template>

<script>
import Tag from "~/components/search/Tag.vue";

export default {
  components: {
    Tag
  },
  async asyncData({app,$axios,isDev, route, store, env, params, query, req, res, redirect, error}) {
     
     let { status, data } = await  $axios.get("/api/work/search?tag=" +store.state.search.active.tag +"&update=" +store.state.search.active.update +"&face=" +store.state.search.active.face +"&sort="+store.state.search.active.sort );;

    return {page :data};
  },
  computed: {
    queryUrl(){
      return  "/api/work/search?tag=" +this.tag +"&update=" +this.update +"&face=" +this.face +"&sort="+this.sort +"&page="+this.pageIndex+"&size=30";
    },
    sort(){
       return this.$store.state.search.active.sort;
    },
    update() {
      return this.$store.state.search.active.update;
    },
    tag() {
      return this.$store.state.search.active.tag;
    },
    face() {
      return this.$store.state.search.active.face;
    }
  },

  methods: {
    async currentChange(index) {
        this.pageIndex = index;
        changeTag();
    },
    async changeTag() {
     let { status, data } = await this.$axios.get(this.queryUrl);
     this.page= data;
    }
  },
  watch: {
    update: function(old, newx) {
      this.changeTag();
    },
    tag: function(old, newx) {
      this.changeTag();
    },
    face: function(old, newx) {
      this.changeTag();
    }
  },
  data() {
    return {
      page: null,
      pageIndex:0,
      pageTotal:10
    };
  }
};
</script>

<style  scoped>
.content {
  padding: 20px 20px;
}
.page {
  display: flex;
  justify-content: flex-end !important;
  padding: 0 40px;
}
.info {
  color: #999;
  text-decoration: none;
}
.scope_01 {
  color: #e1251b;
}
.scope_02 {
  color: #ff9a6a;
}
.el-row {
  padding: 2px 0px;
}

.more {
  display: flex;
  justify-content: center;
  align-items: center;
}

.more a {
  color: #e1251b;
  text-decoration: none;
}
.content {
  padding: 40px 10px;
}
.el-col {
  display: flex;
  justify-content: center;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>